<template>
  <div class="newBody">
    <!-- 新闻头部 -->
    <van-cell value="新增通知" is-link @click="addNew">
  <template #title>
    <span class="custom-title">校园通知</span>&nbsp;
  </template>
</van-cell>
 <div class="newItem_parent">
   
    <div class="newItem" v-for="item in newsList.list" :key="item.id" @click="content(item.id)">
       <p>{{item.noticeTitle}}</p>
        <p><van-tag type="success" v-if="item.state== '1' ? true : false">发布中</van-tag>
            <van-tag type="danger" v-else>暂停发布</van-tag>&nbsp;&nbsp;
                <van-tag color="#7232dd" @click.stop="changeState(item)">更改发布状态+</van-tag>&nbsp;&nbsp;
            <span style="font-size:12px" class="time">{{item.creationTime}}</span>&nbsp;&nbsp;
        </p>
        </div>
       
    </div>
     <VanDialog></VanDialog>
  </div>
</template>

<script setup>
// import { List } from 'vant';
    import { onMounted, reactive } from "vue-demi"
import { newsQuery,newStatechange } from "../model/news"
import { Dialog } from 'vant';
import { useRouter } from "vue-router"
let useRoute = useRouter()

const VanDialog = Dialog.Component;
    //下拉加载
    let newsList = reactive({
        list:[]
    })
 

    // 更改状态确认框
let changeState = (item) =>{
     Dialog.confirm({
        title: '更改发布状态',
        message:
            '确认更改发布状态吗？',
        }).then(() => {
    let sta = item.state == "1" ? "2" : "1"
          newStatechange({"Content-Type":"application/json",id:item.id,state:sta},{
        Authorization:window.localStorage.getItem("token")
            }).then(res => {
                console.log(res);
                item.state = sta
            })
        }).catch(() => {
             console.log("取消了更改");
         });
         
        
    }
    //点击进入详情
    let content = (id) =>{
        useRoute.push("/news/"+id)
    }

onMounted (() => {
    
        newsQuery({},{
  Authorization:window.localStorage.getItem("token")
        }).then(res => {
            console.log(res);
            newsList.list = res.data.rows.reverse()
            console.log(newsList.list);
        })
    })
    //点击进入新增通知
    let addNew = ()=>{
        useRoute.push("/addNews")
    }
</script>

<style lang="scss" scoped>
.newBody{
    
}

    .newItem_parent{
        height: 400px;
        overflow: hidden;
        overflow-y:scroll;
.newItem{
    padding: 10px;
    border-bottom:1px solid gainsboro;
    width: 320px;
    margin-left: 20px;
    height:70px;
    overflow: hidden;

    p{
        line-height: 26px;
    }
    }
}
.time{
    color: gray;
}

</style>